<template>
	<div>
		<!-- 三级分类导航 -->
		<TypeNav/>
		<!-- 列表 -->
		<ListContainer/>
		<!-- 今日推荐 -->
		<Recommend/>
		<!-- 商品排行 -->
		<Rank/>
		<!-- 喜欢 -->
		<Like/>
		<!-- 楼层 -->
		<!--
			这里并不会假报错,为什么?
			首先,在没有拿到数据之前,我们默认的数据floorList是一个空数组
				此时循环这个空数组是循环不出来Floor这个组件的
			只有当数据回来之后,当前数据floorList中才会有值,数组才会有长度
				此时才能循环出内容来,证明已经有数据了,数据直接通过props传参传到了组件中
				组件中在接收到 floor 这个值得时候一定有值,所以不会假报错
		-->
		<Floor v-for="(item, index) in floorList" :key="index" :floor="item"/>
		<!-- 商标 -->
		<Brand/>
	</div>
</template>

<script>
import ListContainer from './ListContainer'
import Recommend from './Recommend'
import Rank from './Rank'
import Like from './Like'
import Floor from './Floor'
import Brand from './Brand'
import { mapActions, mapState } from 'vuex'
export default {
	name:'Home',
	components:{ListContainer,Recommend,Rank,Like,Floor,Brand},
	computed: {
		// 这里映射的时候不能使用数组,因为store中已经开启模块化了
		...mapState({
			floorList: state => state.home.floorList
		})
	},
	mounted() {
		this.$store.dispatch('getFloorList')
	},
	// 以后专门抽时间说映射函数
	// mounted() {
	// 	this.getFloorList();
	// },
	// methods: {
	// 	// 将 actions 中的函数映射过来
	// 	...mapActions(['getFloorList'])
	// }
}
</script>